<template>
  <section>
    <div class="calendar-box">
      <div class="now">
        {{ nowDate }}
      </div>
      <div class="header">
        <div v-for="item in header" :key="item" class="item">
          {{ item }}
        </div>
      </div>
      <div class="content">
        <div
          v-for="(month, index) in monthDays"
          :id="`${index + 1}`"
          :key="index"
          class="month-box"
        >
          <div v-for="(row, index2) in 6" :key="index2" class="row">
            <div
              v-for="item in month.slice(index2 * 7, index2 * 7 + 7)"
              :key="index + item.value"
              class="item"
              :class="{ isDayInNowMonth: !item.isDayInNowMonth }"
            >
              {{ item.value }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-button @click="handlePreMonth">上</el-button>
    <el-button @click="handleNextMonth">下</el-button>
  </section>
</template>

<script>
export default {
  data() {
    return {
      header: ['日', '一', '二', '三', '四', '五', '六'],
      nowYear: '',
      nowMonth: '',
      nowDay: '',
      monthDays: []
    }
  },
  computed: {
    nowDate() {
      return `${this.nowYear}年${this.nowMonth}月`
    }
  },
  mounted() {
    this.init()
    this.fillData()
  },
  methods: {
    init() {
      this.nowYear = new Date().getFullYear()
      this.nowMonth = new Date().getMonth() + 1
      this.nowDay = '日一二三四五六'.charAt(new Date().getDay())
      //   this.monthDays = new Date(this.nowYear, this.nowMonth, 0).getDate()
    },
    fillData() {
      for (let index = 1; index <= 12; index++) {
        let monthArr = []
        let monthDays = new Date(this.nowYear, index, 0).getDate()
        for (let index2 = 0; index2 < monthDays; index2++) {
          let item = {
            value: index2 + 1,
            isDayInNowMonth: true
          }
          monthArr.push(item)
        }
        let fillFront = Number(
          '0123456'.charAt(new Date(`${index}/1/${this.nowYear}`).getDay())
        )
        let preMonthDays = new Date(this.nowYear, index - 1, 0).getDate()
        console.log(fillFront)
        let frontArr = new Array(fillFront).fill(0)
        frontArr = frontArr
          .map((v, i) => {
            return {
              value: preMonthDays - i,
              isDayInNowMonth: false
            }
          })
          .reverse()
        let backArr = new Array(42 - fillFront - monthDays).fill(0)
        backArr = backArr.map((v, i) => {
          return {
            value: i + 1,
            isDayInNowMonth: false
          }
        })
        monthArr = [...frontArr, ...monthArr, ...backArr]
        this.monthDays.push(monthArr)
        console.log(this.monthDays)
      }
    },
    handlePreMonth() {
      this.nowMonth = this.nowMonth - 1
      this.custormAnchor(this.nowMonth)
    },
    handleNextMonth() {
      this.nowMonth = this.nowMonth + 1
      this.custormAnchor(this.nowMonth)
    },
    custormAnchor(anchorName) {
      let anchorElement = document.getElementById(anchorName)
      if (anchorElement) {
        anchorElement.scrollIntoView()
      }
    }
  }
}
</script>

<style lang="less" scoped>
.calendar-box {
  width: 400px;
  border: 1px solid #ccc;

  .content {
    height: 311px;
    overflow: hidden;
    scroll-behavior: smooth;
  }
  .header,
  .row {
    display: flex;
    text-align: center;
    .item {
      width: 57px;
      height: 50px;
      line-height: 50px;
    }
  }
  .row {
    border: 1px solid #ccc;
  }
  .month-box {
    .isDayInNowMonth {
      color: #eee;
    }
  }
}
</style>
